<template>
  <el-dialog
    v-model="props.editUserInfo.isShow"
    align-center
    width="500px"
    class="user-edit-dialog"
  >
    <template #header>
      <div class="dialog-header">
        <h3 class="dialog-title">用户类型编辑</h3>
      </div>
    </template>

    <div class="user-info">
      <el-image
        :src="props.editUserInfo.info.avatar"
        class="user-avatar"
        fit="cover"
      >
        <template #error>
          <el-image :src="errorImageUrlConstant" />
        </template>
      </el-image>
      <h4 class="user-name">{{ props.editUserInfo.info.username }}</h4>
    </div>

    <el-form label-position="left" class="edit-form">
      <el-form-item label="账户类型" prop="accountType">
        <el-select
          v-model="accountTypeOptions"
          placeholder="请选择账户类型"
          class="full-width-select"
        >
          <el-option
            v-for="item of accountTypeConstants"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <div class="dialog-footer">
      <el-button
        type="danger"
        @click="handleConfirm(props.editUserInfo.info)"
        class="action-btn"
      >
        确认修改
      </el-button>
      <el-button
        plain
        @click="props.editUserInfo.isShow = false"
        class="action-btn"
      >
        取消修改
      </el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { accountTypeChangeApi } from "@/apis/admin";
import { accountTypeConstants, errorImageUrlConstant } from "@/constant";
import { ElMessage, ElMessageBox } from "element-plus";

const props = defineProps({
  editUserInfo: Object as () => any,
});

const emit = defineEmits(["updateUserList"]);

const accountTypeOptions = ref();

async function handleConfirm(info: any) {
  const warningMessage =
    "<span style='color: var(--el-color-danger)'>此操作会导致用户权限变化，请慎重操作！";
  let accountTypeText = "";

  if (accountTypeOptions.value === accountTypeConstants[0].id) {
    accountTypeText = accountTypeConstants[0].label;
  } else if (accountTypeOptions.value === accountTypeConstants[1].id) {
    accountTypeText = accountTypeConstants[1].label;
  } else if (accountTypeOptions.value === accountTypeConstants[2].id) {
    accountTypeText = accountTypeConstants[2].label;
  } else if (accountTypeOptions.value === accountTypeConstants[3].id) {
    accountTypeText = accountTypeConstants[3].label;
  }

  const changeMessage = `<span style='color: var(--el-color-warning)''> ${accountTypeText} </span>吗？`;

  try {
    await ElMessageBox.confirm(
      `确认修改用户 ${props.editUserInfo.info.username} 的账户类型为${changeMessage}${warningMessage}`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        dangerouslyUseHTMLString: true,
      }
    );
    await changeAccountType(info);
  } catch (error) {
    ElMessage({
      type: "info",
      message: "操作取消",
    });
  }
}

async function changeAccountType(info: any) {
  const formData = new FormData();
  formData.append("userId", info.id);
  formData.append("accountType", accountTypeOptions.value);

  try {
    const res: any = await accountTypeChangeApi(formData);
    if (res.code === 0) {
      ElMessage.success("修改成功！");
      emit("updateUserList");
    } else {
      ElMessage.error("修改失败！");
    }
  } catch (error) {
    console.log(error);
  } finally {
    props.editUserInfo.isShow = false;
  }
}

onUpdated(() => {
  accountTypeOptions.value = props.editUserInfo.info.accountType;
});
</script>

<style scoped>
/* User Edit Dialog Container */
.user-edit-dialog .el-dialog {
  width: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Dialog Header */
.user-edit-dialog .el-dialog__header {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

.user-edit-dialog .el-dialog__header .dialog-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

/* Dialog Body */
.user-edit-dialog .el-dialog__body {
  padding: 24px;
}

/* User Info Section */
.user-edit-dialog .user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.user-edit-dialog .user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #409eff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}

.user-edit-dialog .user-name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

/* Edit Form */
.user-edit-dialog .edit-form {
  margin: 0 auto;
  width: 100%;
  max-width: 300px;
}

.user-edit-dialog .edit-form .el-form-item__label {
  font-weight: 500;
  padding-bottom: 8px;
  color: #606266;
}

.user-edit-dialog .full-width-select {
  width: 100%;
}

.user-edit-dialog .full-width-select .el-input__inner {
  height: 40px;
  line-height: 40px;
}

/* Dialog Footer */
.user-edit-dialog .dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  gap: 16px;
}

.user-edit-dialog .action-btn {
  min-width: 100px;
  padding: 10px 16px;
  border-radius: 4px;
  font-weight: 500;
}

.user-edit-dialog .action-btn.el-button--danger {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.user-edit-dialog .action-btn.el-button--default {
  color: #606266;
  border-color: #dcdfe6;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
  .user-edit-dialog .el-dialog {
    width: 90%;
    margin-top: 20vh !important;
  }

  .user-edit-dialog .edit-form {
    max-width: 100%;
  }

  .user-edit-dialog .dialog-footer {
    flex-direction: column;
    gap: 12px;
  }

  .user-edit-dialog .action-btn {
    width: 100%;
  }
}
</style>
